<div class="container" id="donut">
    <div class="row">
        <div class="col-md-6">
            <article>
                <h2 class="tutorial__heading">Donut Chart with Legend</h2>
                <div class="card--chart">
                    <div class="js-donut-chart-container donut-chart-container"></div>
                    <div class="js-legend-chart-container legend-chart-container"></div>
                </div>
            </article>
        </div>
        <div class="col-md-6 sidebar">
            <h3>The code</h3>
            <pre><code class="language-javascript">
donutChart
    .isAnimated(true)
    .highlightSliceById(2)
    .width(containerWidth)
    .height(containerWidth)
    .externalRadius(containerWidth/2.5)
    .internalRadius(containerWidth/5)
    .on('customMouseOver', function(data) {
        legendChart.highlight(data.data.id);
    })
    .on('customMouseOut', function() {
        legendChart.clearHighlight();
    });

donutContainer.datum(dataset).call(donutChart);

legendContainer.datum(dataset).call(legendChart);
            </code></pre>

            <h4>Colors</h4>
            <label class="control-label">You can also check other color schemas:</label>
            <div class="js-color-selector-container"></div>
            </p>

            <h4>Data Input</h4>
            <p>Check the <a href="/britecharts/global.html#DonutChartData__anchor">data input schema</a> of this chart.</p>

            <h4>Export Chart</h4>
            <p>You can also export this chart by pressing: <input id="button" type="button" value="Export" class="btn btn-sm btn-primary" /></p>

            <h4>Demo Code</h4>
            <p>Read the whole code of this demo <a href="https://github.com/eventbrite/britecharts/blob/master/demos/src/demo-donut.js">in github</a></p>
        </div>
    </div>
</div>

<div class="container">
    <div class="row">
        <div class="
col-md-6">
            <section>
                <article>
                    <h2>Small Donut Chart with Inline Legend</h2>
                    <div class="js-small-donut-chart-container card--chart"></div>
                    <div class="js-inline-legend-chart-container legend-chart-container"></div>
                </article>
            </section>
        </div>
        <div class="
col-md-6 sidebar">
            <h3>The code</h3>
            <pre><code class="language-javascript">
donutChart
    .width(containerWidth)
    .height(containerWidth/1.8)
    .externalRadius(containerWidth/5)
    .internalRadius(containerWidth/10)
    .on('customMouseOver', function(data) {
        legendChart.highlight(data.data.id);
    })
    .on('customMouseOut', function() {
        legendChart.clearHighlight();
    });

donutContainer.datum(dataset).call(donutChart);
            </code></pre>

            <h4>Demo Code</h4>
            <p>Read the whole code of this demo <a href="https://github.com/eventbrite/britecharts/blob/master/demos/src/demo-donut.js">in github</a></p>
        </div>
    </div>
</div>

<div class="container">
    <div class="row">
        <div class="col-md-6">
            <section>
                <article>
                    <h2>Donut Chart with fixed highlighted slice</h2>
                    <div class="js-donut-highlight-slice-chart-container card--chart"></div>
                    <div class="js-vertical-legend-no-quantity-container"></div>
                </article>
            </section>
        </div>
        <div class="
col-md-6 sidebar">
            <h3>The code</h3>
            <pre><code class="language-javascript">
donutChart
    .highlightSliceById(11)
    .hasFixedHighlightedSlice(true)
    .width(containerWidth)
    .height(containerWidth/1.8)
    .externalRadius(containerWidth/5)
    .internalRadius(containerWidth/10)
    .on('customMouseOver', function (data) {
        legendChart.highlight(data.data.id);
    })
    .on('customMouseOut', function () {
        legendChart.highlight(11);
    });

legendChart.highlight(11);
donutContainer.datum(datasetWithThreeItems).call(donutChart);
            </code></pre>

            <h4>Demo Code</h4>
            <p>Read the whole code of this demo <a href="https://github.com/eventbrite/britecharts/blob/master/demos/src/demo-donut.js">in github</a></p>
        </div>
    </div>
    <div class="row">
            <div class="col-md-6">
                <article>
                    <a name="loading-state"></a>
                    <h2 class="tutorial__heading">Loading State</h2>
                    <div class="js-loading-container"></div>
                </article>
            </div>
            <div class="col-md-6 sidebar">
                <h3>The code</h3>
                <pre><code class="language-javascript">
donutContainer.html(donutChart.loadingState())
                </code></pre>

                <h4>Demo Code</h4>
                <p>Read the whole code of this demo <a href="https://github.com/eventbrite/britecharts/blob/master/demos/src/demo-donut.js">in github</a></p>
            </div>
        </div>
</div>
